<template>
  <div class="my-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="我的" :right="rightButtons" :title-style="{ color: 'white' }" class="custom-nav-bar">
      <template #title>
        <span style="color: white;font-size:16px;">我的</span>
      </template>
    </van-nav-bar>
    <!-- 用户信息区域 -->
    <div class="user-info">
      <img class="avatar" :src="hyinfo.headimgurl" alt="头像" />
      <div class="user-name">
        <span>{{ hyinfo.wxname }}</span>
      </div>
    </div>
    <!-- 统计数据区域 
    <div class="statistic">
      <div class="stat-item">
        <span class="stat-num">1</span><br/>
        <span class="stat-text">点赞产品</span>
      </div>
      <div class="stat-item">
        <span class="stat-num">3</span><br/>
        <span class="stat-text">关注店铺</span>
      </div>
      <div class="stat-item">
        <span class="stat-num">1</span><br/>
        <span class="stat-text">浏览记录</span>
      </div>
      <div class="stat-item">
        <span class="stat-num">0</span><br/>
        <span class="stat-text">收藏夹</span>
      </div>
    </div>
    -->
    <!-- 其他功能区域 -->
    <div class="other-functions">
      <div class="function-grid">
        <div class="function-item" @click="gotoAgencyChat">
          <van-icon name="comment-o" size="30" color="#f00" />
          <span>代理咨询</span>
        </div>
        <div class="function-item" @click="gotoApplysample">
          <van-icon name="edit" size="30" color="#9061FF" />
          <span>样品申请</span>
        </div>
        <div class="function-item"  @click="gotoKefu">
          <van-icon name="friends" size="30" color="#FFD01E" />
          <span>在线客服</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getHyinfo, queryHyinfoByOpenid } from '../../api/api';
export default {
  data() {
    return {
      avatarUrl: 'https://img.example.com/avatar.jpg', // 替换为真实头像地址
      rightButtons: [
        {
          text: '',
          icon: 'ellipsis'
        }
      ],
      logoUrl: 'https://img.example.com/logo.jpg', // 替换为真实 logo 地址
      openid: '', // 存储 openid 的变量
      accessToken: '', // 存储 accessToken 的变量
      userInfo: { // 存储用户信息的对象
        nickname: '',
        avatarUrl: ''
      },
      hyid: '', // 存储 hyid 的变量
      hyinfo: { // 存储 hyinfo 的对象
        wxname: '', // 微信昵称
        headimgurl: '' // 头像地址
      }
    };
  },
  created() {
    // 在这里可以进行一些初始化操作，例如获取用户信息等
    let openid = localStorage.getItem('openid'); // 从本地存储中获取 openid
    this.openid = openid; // 将 openid 赋值给 data 中的 openid 变量
    this.queryHyinfoByOpenid() // 调用queryHyinfoByOpenid方法来获取会员信息
  },
  methods: {

    gotoAgencyChat() {
      this.$router.push({path:'/agencychatlist',query: {openid:this.openid}}); // 跳转到 agencyChat 页面 
    },

    gotoApplysample() {
      this.$router.push({path:'/applysamplelist',query: {openid:this.openid}}); // 跳转到 agencyChat 页面 
    },

    gotoKefu(){
      this.$router.push({ path: '/kefu', query: { openid: this.openid } }); // 跳转到 agencyChat 页面 
    },

    queryHyinfoByOpenid(){
            let that = this 
            let param = {openid:this.openid}
            queryHyinfoByOpenid(param).then(response => {
                if(response.code == 200){
                    if(response.data){
                        that.hyid = response.data.hyid
                        that.hyinfo = response.data
                        localStorage.setItem('hyid', that.hyid)
                        localStorage.setItem('wxname', response.data.wxname)
                        localStorage.setItem('headimgurl', response.data.headimgurl)
                        that.getHyinfo() // 调用getHyinfo方法来获取会员信息
                    }
                }
            })
      },

      getHyinfo() {
            const param = { hyid: this.hyid }
            getHyinfo(param).then(res => {
                if (res.code == 200) {
                    this.hyinfo = res.data
                }
            })
        },

    goBack() {
      // 返回上一页逻辑
      this.$router.back();
    },
    goToAuth() {
      // 去认证页面逻辑
      this.$router.push('/auth');
    },
    goToShop() {
      // 去云币商城页面逻辑
      this.$router.push('/shop');
    },
    goToSettings() {
      // 去设置页面逻辑
      this.$router.push('/settings');
    },
    switchIdentity() {
      // 切换身份逻辑
      console.log('切换身份操作');
    }
  }
};
</script>

<style scoped>
.my-page {
  background-color: #F7F9FD;
  height: calc(100vh - 50px); /* 减去顶部导航栏的高度 */
  overflow-y: auto; /* 允许内容滚动 */
}
.cusom-nav-bar {
  background-color: red; /* 设置背景颜色 */
  color: white; 
}
::v-deep.custom-nav-bar.title {
  color: white; /* 通过深度选择器设置标题文字颜色 */
  --van-nav-bar-title-text-color	: white;
}
::v-deep.custom-nav-bar {
  background-color: red;
}
.user-info {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #f00;
  color: #fff;
}
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 15px;
}
.user-name {
  flex: 1;
  font-size: 22px;
  font-weight: bold;
  padding-bottom: 20px;
}
.setting-icon {
  margin-left: 10px;
}
.statistic {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background-color: #fff;
  margin:10px;
  border-radius: 5px;
  padding:10px;
  margin-top: -20px;
}
.stat-item {
  text-align: center;
  width: 20%;
  margin-bottom: 10px;
}
.stat-num {
  font-size: 24px;
  color: #f00;
  font-weight: bold;
}
.stat-text {
  font-size: 14px;
  color: #333;
}
.other-functions {
  margin:10px;
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}
h3 {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}
.function-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
.function-item {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 10px;
  border-radius: 5px;
}
.function-item span {
  margin-left: 10px;
  font-size: 14px;
  color: #333;
}
.footer {
  text-align: center;
  padding: 20px;
  background-color: #fff;
}
.logo {
  width: 80px;
  height: auto;
  margin-bottom: 5px;
}
</style>